<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="aaa">
      <div class="head">
        <el-button
          type="primary"
          style="margin-bottom: 30px;"
          @click="addFreight"
        >新增模板</el-button>
        <el-table
          :data="manageList"
          stripe
        >
          <el-table-column
            prop="templateType"
            label="模板类型"
          >
            <template v-slot="{row}">
              {{ row.templateType===1 ?'同城寄':row.templateType===2?'省内寄':row.templateType===3?'经济区互寄':'跨省' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="transportType"
            label="运送类型"
          >
            <template v-slot="{row}">
              {{ row.transportType===1?'普快':'特快' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="associatedCityList"
            label="关联城市"
          >
            <template v-slot="{row}">
              <span
                v-for="item in row.associatedCityList"
                :key="item"
              >{{ item==='1'?'全国':item==='2'?'京津冀':item==='3'?'江浙沪':item==='4'?'川渝':item==='5'?'黑吉辽':'' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
          ></el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
          ></el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="content"
            width="100px"
          >
            <template
              v-slot="{row}"
            >
              <el-button
                type="text"
                size="mini"
                @click="editFreightManage(row)"
              >编辑</el-button>
              <span style="color: darkgrey;">|</span>
              <el-button
                slot="reference"
                type="text"
                size="mini"
                style="color: red;"
                @click="open(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹出框 -->
        <FreightAdd
          ref="freightadd"
          :freight-addshow-dialog.sync="freightAddshowDialog"
          :edit-manage="editManage"
          @rerender="rerender"
        ></FreightAdd>
      </div>
    </div>

  </div>

</template>

<script>
import { freightManageList, freightManageDelete, freightManageOperate } from '@/api/transit'
import FreightAdd from './components/freight-add.vue'
export default {
  components: { FreightAdd },
  data() {
    return {
      manageList: [], // 列表数据
      freightAddshowDialog: false, // 控制子组件添加弹框
      editManage: {}// 获取列表详情
    }
  },
  created() {
    this.freightList()
  },
  methods: {
    // 获取渲染列表
    async freightList() {
      const res = await freightManageList()
      console.log(res)
      this.manageList = res.data
    },
    // 删除每行数据
    // async delManage(id) {
    //   await freightManageDelete(id)
    //   this.$message.success('删除成功')
    //   this.freightList()
    // },
    // 删除按钮
    open(id) {
      this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await freightManageDelete(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.freightList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击添加按钮弹出添加框
    addFreight() {
      this.freightAddshowDialog = true
    },
    // 添加完成之后弹出框关闭的时候重新渲染列表
    rerender() {
      if (this.freightAddshowDialog === false) {
        this.freightList()
      }
    },
    // 点击编辑按钮
    async editFreightManage(data) {
      // 获取当前行回显数据
      const res = await freightManageOperate(data)
      // 打开编辑弹出框
      this.freightAddshowDialog = true
      //  回显的数组赋值给一个对象 用于传给子组件
      this.editManage = res.data
      // console.log('adb', this.editManage)
      // console.log(+id)
      // 调用子组件的方法
      this.$nextTick(() => {
        this.$refs.freightadd.getFreightManage()
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
  .aaa{
    padding: 28px;
  }
    .head{
      background-color: rgb(255, 255, 255);
      width: 100%;
      padding: 20px;

      .el-button--primary{
        background-color: rgb(225, 85, 54);
    border-color: rgb(225, 85, 54);
      }
    }

}
</style>
